<template>
  <div>
    <el-dialog
      :title="dialogAttr.title"
      :visible.sync="isOpen"
      width="50%"
      append-to-body
      :before-close="handleClose"
    >
      <el-form
        :model="unBindCourseQuery"
        ref="unBindCourseQueryForm"
        size="medium"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="courseName">
          <el-input v-model="unBindCourseQuery.courseName" placeholder="请输入课程名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="handleQueryUnBindCourse"
          >搜索</el-button>
          <el-button icon="el-icon-refresh" size="medium" @click="resetUnBindCourseQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="courseList">
        <el-table-column
          label="课程标题"
          width="100"
          align="center"
          prop="courseTitle"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="课程封面"
          align="center"
          prop="courseCover"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-image
              class="courseImg"
              :src="scope.row.courseCover"
              :preview-src-list="[scope.row.courseCover]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="结课时间" align="center" prop="courseEndDate" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.courseEndDate, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否开课" align="center" prop="courseIsBegin">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.course_is_begin" :value="scope.row.courseIsBegin" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleCourseAdd(scope.row)"
            >绑定</el-button>
            <el-button
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="handleCourseInfo(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="unBindCourseQuery.total>0"
        :total="unBindCourseQuery.total"
        :page.sync="unBindCourseQuery.pageNum"
        :limit.sync="unBindCourseQuery.pageSize"
        @pagination="getCourseList"
      />
    </el-dialog>

    <!-- 详情 -->
    <course-info :visible.sync="courseInfo.show" :courseData="courseInfo.data" />
  </div>
</template>

<script>
import CourseInfo from "./courseInfo.vue";
export default {
  name: "UnBindCourseList",
  dicts: ["course_is_begin"],
  components: {
    CourseInfo
  },
  props: {
    unBindId: {
      type: Object,
      default: () => {
        return {
          type: "str",
          value: 0
        };
      }
    },
    // 未绑定课程列表
    getUnBindCourseList: {
      type: Function,
      default: () => {}
    },
    // 绑定课程
    addUnBindCourse: {
      type: Function,
      default: () => {}
    },
    // 弹框属性
    dialogAttr: {
      type: Object,
      default: () => {
        return {
          title: "",
          show: false
        };
      }
    }
  },
  data() {
    return {
      // 课程查询条件
      unBindCourseQuery: {
        pageSize: 10,
        pageNum: 1,
        courseName: undefined,
        total: 0
      },
      // 课程列表
      courseList: [],
      // loading
      loading: false,
      // 课程详情
      courseInfo: {
        show: false,
        data: {}
      }
    };
  },
  methods: {
    /** 课程列表 */
    getCourseList() {
      this.loading = true;
      this.getUnBindCourseList(this.unBindCourseQuery)
        .then(res => {
          this.courseList = res.rows;
          this.unBindCourseQuery.total = res.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索未绑定课程 */
    handleQueryUnBindCourse() {
      this.unBindCourseQuery.pageNum = 1;
      this.getCourseList();
    },
    resetUnBindCourseQuery() {
      this.resetForm("unBindCourseQueryForm");
      this.handleQueryUnBindCourse();
    },
    /** 绑定课程 */
    handleCourseAdd(row) {
      this.loading = true;
      let data = {
        courseId: row.courseId
      };
      data[this.unBindId.type] = this.unBindId.value;
      this.addUnBindCourse([data])
        .then(res => {
          this.$modal.msgSuccess("绑定成功");
          this.getCourseList();
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 关闭时的回调 */
    handleClose() {
      this.unBindId.value = 0;
      this.dialogAttr.show = false;
    },
    /** 详情 */
    handleCourseInfo(row) {
      this.courseInfo.data = row;
      this.courseInfo.show = true;
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.dialogAttr.show;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    unBindId: {
      handler(val) {
        if (val.value != 0 && val.value != "0") {
          let idType = val.type;
          this.unBindCourseQuery[idType] = val.value;
          this.getCourseList();
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped>
.courseImg {
  display: block;
  margin: auto;
  width: 120px;
  height: 60px;
}
</style>